<template>
    <div
        v-show="($route.path === '/my/index' || $route.path === '/news' || $route.path === '/cinema/index' || $route.path === '/movie')">
        <van-tabbar v-model="active" active-color="#ee0a24">
            <van-tabbar-item v-for="nav in footerNav" :key="nav.id" :url="nav.url" :icon="nav.icon">{{ nav.name
            }}</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>

import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
import store from '@/store';

Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
    created() {
        // let currentPath = this.$route.path
        // let index = this.footerNav.findIndex(item => item.url === '#' + currentPath)
        // this.index = index
        // this.$store.commit('changeActive', this.inedx)
        // console.log(888, index);
    },
    computed: {
        active: {
            get() {
                return this.$store.state.active
            },
            set() {
                this.$store.commit('changeActive', this.index)
            }
        }
    },
    data() {
        return {
            index: 0,
            footerNav: [
                {
                    name: '电影',
                    id: 1,
                    icon: 'video-o',
                    url: '#/movie'
                },
                {
                    name: '影院',
                    id: 2,
                    icon: 'shop-o',
                    url: '#/cinema/index'
                },
                {
                    name: '资讯',
                    id: 3,
                    icon: 'comment-o',
                    url: '#/news'
                },
                {
                    name: '我的',
                    id: 4,
                    icon: 'manager-o',
                    url: '#/my/index'
                }
            ]
        }
    },
    methods: {
        
    }
}
</script>

<style></style>
